<template>
  <div class="child-body">
    <div class="child-top">
      <div class="small-title"><p class="title">道路建设情况展示</p></div>
      <div class="road-info">
        <div class="info-top">
          <p class="title">道路建设情况分析</p>
        </div>
        <div class="info-body">
          <div class="info">
            <div id="info-echart-1"></div>
            <div class="info-content">
              <p class="info-1">总长度(km)</p>
              <p class="info-2">4.377</p>
              <div class="i-c-text1">
                <div class="yet"></div>
                <p class="yet-1">已建设:</p>
                <p class="yet-2">3.648</p>
              </div>
              <div class="i-c-text1">
                <div class="not"></div>
                <p class="yet-1">未建设:</p>
                <p class="yet-2">0.729</p>
              </div>
            </div>
          </div>
          <div class="info">
            <div id="info-echart-2"></div>
            <div class="info-content">
              <p class="info-1">总面积(km²)</p>
              <p class="info-2">913.854</p>
              <div class="i-c-text1">
                <div class="yet"></div>
                <p class="yet-1">已建设:</p>
                <p class="yet-2">860.156</p>
              </div>
              <div class="i-c-text1">
                <div class="not"></div>
                <p class="yet-1">未建设:</p>
                <p class="yet-2">53.698</p>
              </div>
            </div>
          </div>
          <div class="info">
            <div id="info-echart-3"></div>
            <div class="info-content">
              <p class="info-1">总长度(km/km²)</p>
              <p class="info-2">8.65</p>
              <div class="i-c-text1">
                <div class="yet"></div>
                <p class="yet-1">已建设:</p>
                <p class="yet-2">5.32</p>
              </div>
              <div class="i-c-text1">
                <div class="not"></div>
                <p class="yet-1">未建设:</p>
                <p class="yet-2">3.33</p>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="road-contrast">
        <div class="contrast-top">
          <p class="title">道路柱状图对比</p>
        </div>
        <div class="contrast-body">
          <div id="histogram" class="contrast-histogram"></div>
        </div>
      </div>
    </div>
    <div class="child-foot">
      <congestion :title="progressTitle" :list="progressList" />
      <!-- <div class="content">
        <p style="font-size: 16px">道路图例</p>
        <div class="c-info">
          <div class="line-info">
            <div class="line" style="background-color: #1adff1ff"></div>
            <p>快速路</p>
          </div>
          <div class="line-info">
            <div class="line" style="background-color: #f76f39ff"></div>
            <p>快速路</p>
          </div>
          <div class="line-info">
            <div class="line" style="background-color: #f1d51aff"></div>
            <p>快速路</p>
          </div>
          <div class="line-info">
            <div class="line" style="background-color: #1af19dff"></div>
            <p>快速路</p>
          </div>
          <div class="line-info">
            <div class="line" style="background-color: #139df4ff"></div>
            <p>快速路</p>
          </div>
        </div>
      </div> -->
      <div class="content2">
        <p style="font-size: 16px">道路基础设置图例</p>
        <div class="c2-info">
          <div class="info-1">
            <img style="width: 34px; height: 49px" src="@/assets/images/basic/tianqiao.png" />
            <p style="margin-left: 13px">过街天桥</p>
          </div>
          <div class="info-1" style="margin-left: 37px">
            <img style="width: 34px; height: 49px" src="@/assets/images/basic/dixiatongdao.png" />
            <p style="margin-left: 13px">地下通道</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
  import { defineComponent, inject, onMounted, reactive, toRefs } from 'vue';
  import congestion from '@/components/congestion/index.vue';
  export default defineComponent({
    components: { congestion },
    setup() {
      const state = reactive({
        progressTitle: '道路图例',
        progressList: [
          {
            title: '快速路',
            className: 'key_1',
          },
          {
            title: '主干路',
            className: 'key_2',
          },
          {
            title: '次干路',
            className: 'key_3',
          },
          {
            title: '支路',
            className: 'key_4',
          },
          {
            title: '高速',
            className: 'key_5',
          },
        ],
      });
      onMounted(() => {
        annulus('info-echart-1', 70, 30, '道路长度');
        annulus('info-echart-2', 60, 40, '道路面积');
        annulus('info-echart-3', 30, 70, '道路密度');
        histogram();
      });
      const echarts = inject('echarts');
      // 绘制半环echart 元素id  完成进度   未完成  标题
      const annulus = (elementId, val1, val2, title) => {
        // eslint-disable-next-line camelcase
        const dsiab_com = document.getElementById(elementId);
        // eslint-disable-next-line camelcase
        dsiab_com.removeAttribute('_echarts_instance_');
        // 下面一半的不进行展示
        const half = val1 + val2;
        const chart = echarts.init(document.getElementById(elementId));
        const option = {
          backgroundColor: '#ffffff00',
          tooltip: {
            show: false,
          },
          title: {
            text: title,
            left: 'center',
            textStyle: {
              color: '#fff',
              fontSize: '14px',
            },
          },
          color: ['#01dadc', '#23cea7', '#5096e0'],
          series: [
            {
              name: '未完成',
              type: 'pie',
              startAngle: 0,
              radius: ['67%', '80%'],
              center: ['50%', '80%'],
              legendHoverLink: false,
              hoverAnimation: false,
              avoidLabelOverlap: false,
              label: {
                normal: {
                  show: false,
                  position: 'center',
                },
                emphasis: {
                  show: true,
                  textStyle: {
                    fontSize: '30',
                    fontWeight: 'bold',
                  },
                },
              },
              labelLine: {
                normal: {
                  show: false,
                },
              },
              data: [
                {
                  value: half,
                  itemStyle: {
                    normal: {
                      color: 'rgba(35,206,167,0)',
                    },
                  },
                },
                {
                  value: val1,
                  itemStyle: {
                    normal: {
                      color: 'rgba(255,255,255,0.3)',
                    },
                  },
                },
                {
                  value: val2,
                  itemStyle: {
                    normal: {
                      color: 'rgba(159, 170, 183, 1)',
                    },
                  },
                },
              ],
            },
            {
              name: '已建设',
              type: 'pie',
              startAngle: 0,
              hoverAnimation: false,
              radius: ['87%', '100%'],
              center: ['50%', '80%'],
              label: {
                normal: {
                  show: false,
                  position: 'center',
                },
                emphasis: {
                  show: true,
                  textStyle: {
                    fontSize: '10',
                    fontWeight: 'bold',
                  },
                },
              },
              labelLine: {
                normal: {
                  show: false,
                },
              },
              data: [
                {
                  value: half,
                  itemStyle: {
                    normal: {
                      color: 'rgba(1,218,220,0)',
                    },
                  },
                },
                {
                  value: val1,
                  itemStyle: {
                    normal: {
                      color: {
                        type: 'linear',
                        colorStops: [
                          { offset: 0, color: 'rgba(24, 145, 253, 0.9)' },
                          { offset: 1, color: '#0764FEFF' },
                        ],
                      },
                    },
                  },
                },
                {
                  value: val2,
                  itemStyle: {
                    normal: {
                      color: 'rgba(1,218,220,0.1)',
                    },
                  },
                },
              ],
            },
          ],
        };
        chart.setOption(option);
      };
      const histogram = () => {
        // eslint-disable-next-line camelcase
        const dsiab_com = document.getElementById('histogram');
        // eslint-disable-next-line camelcase
        dsiab_com.removeAttribute('_echarts_instance_');
        // 下面一半的不进行展示
        const chart = echarts.init(document.getElementById('histogram'));
        const option = {
          title: {
            text: '单位(km)',
            textStyle: {
              color: '#fff',
              fontSize: '14px',
            },
          },
          tooltip: {
            trigger: 'axis',
          },
          legend: {
            textStyle: {
              fontSize: 12,
              color: '#E6E6E6FF',
            },

            data: ['已建设', '未建设'],
            x: 'right',
            y: 'top',
          },
          calculable: true,
          xAxis: [
            {
              type: 'category',
              // prettier-ignore
              data: ['快速路', '主干路', '次干路', '支路', '高速', '未定义'],
              axisTick: { show: false },
            },
          ],
          yAxis: [
            {
              type: 'value',
              // prettier-ignore
              min:0,
              max: 1000,
              data: [0, 200, 400, 600, 800, 1000],
              axisLabel: {
                interval: 0,
                textStyle: {
                  fontSize: 12,
                  color: '#ffffff',
                },
              },
              splitLine: {
                lineStyle: {
                  type: 'dashed', //虚线
                },
                show: true, //隐藏
              },
            },
          ],
          grid: {
            top: '15%',
            right: '5%',
            left: '10%',
            bottom: '9%',
          },
          series: [
            {
              name: '已建设',
              type: 'bar',
              barWidth: 10,
              data: [100, 200, 300, 400, 100, 200],
              itemStyle: {
                normal: {
                  color: '#2473f6FF',
                },
              },
            },
            {
              name: '未建设',
              type: 'bar',
              barWidth: 10,
              data: [200, 300, 500, 600, 800, 200],
              itemStyle: {
                normal: {
                  color: '#9faab7FF',
                },
              },
            },
          ],
        };
        chart.setOption(option);
      };
      return {
        ...toRefs(state),
      };
    },
  });
</script>
<style lang="less" scoped>
  .child-body {
    position: absolute;
    right: 30px;
  }
  .child-top {
    width: 470px;
    height: 650px;
    background: url(@/assets/images/basic/bg.png) no-repeat;
    display: flex;
    flex-direction: column;
    align-items: center;
    .small-title {
      width: 422px;
      margin-top: 22px;
      height: 40px;
      background: url(@/assets/images/basic/smallTitle.png) no-repeat;
      display: flex;
      align-items: center;
      color: white;
      .title {
        margin-left: 26px;
        font-size: 20px;
        font-family: YouSheBiaoTiHei;
        font-weight: 400;
        color: #ffffff;
        text-shadow: 0px 0px 4px #4e85ff, 0px 1px 4px #0093ff;
      }
    }
    .road-info {
      margin-top: 22px;
      .info-top {
        width: 422px;
        height: 25px;
        background: url(@/assets/images/basic/roadInfo.png) no-repeat;
        .title {
          font-size: 16px;
          margin-left: 21px;
          font-family: YouSheBiaoTiHei;
          font-weight: 400;
          color: #ffffff;
          line-height: 18px;
          text-shadow: 0px 0px 6px #1fa3ff;
        }
      }
      .info-body {
        margin-top: 23px;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        .info {
          width: 120px;
          div {
            width: 120px;
            height: 120px;
          }
          .info-content {
            color: white;
            display: flex;
            flex-direction: column;
            align-items: center;
            margin-top: -14%;
            .yet {
              width: 10px;
              height: 10px;
              border-radius: 2px;
              background-color: #1e70f7ff;
            }
            .not {
              width: 10px;
              height: 10px;
              border-radius: 2px;
              background-color: #9faab7ff;
            }
            .i-c-text1 {
              display: flex;
              height: 20px;
              margin-top: 6px;
              justify-content: center;
              align-items: center;
              font-size: 14px;
              .yet-1 {
                margin-left: 2px;
                color: #c3dcecff;
              }
              .yet-2 {
                margin-left: 2px;
                color: #88bcf7ff;
              }
            }
            .info-1 {
              color: #ffffffff;
              font-size: 12px;
            }
            .info-2 {
              font-size: 20px;
              color: white;
            }
          }
        }
      }
    }
    .road-contrast {
      .contrast-top {
        width: 422px;
        height: 25px;
        background: url(@/assets/images/basic/roadInfo.png) no-repeat;
        .title {
          font-size: 16px;
          margin-left: 21px;
          font-family: YouSheBiaoTiHei;
          font-weight: 400;
          color: #ffffff;
          line-height: 18px;
          text-shadow: 0px 0px 6px #1fa3ff;
        }
      }
      .contrast-body {
        margin-top: 10px;
        .contrast-histogram {
          width: 421px;
          height: 250px;
        }
      }
    }
  }
  .child-foot {
    // background: url(@/assets/images/basic/tuli.png) no-repeat;
    // background-size: 100% 100%;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(0, 0, 0, 0.1);
    border-radius: 6px;
    width: 100%;
    // height: 194px;
    margin-top: 30px;
    display: flex;
    flex-direction: column;
    align-items: center;
    color: white;
    padding: 10px 20px;
    :deep(.progress) {
      height: 5px;
    }
  }
</style>
